{extend name="layout/layout"}
{block name="content"}
<section>
    <div class="layui-main">
        <!--        轮播-->
        <div id="top-carousel-container">
            <div class="layui-carousel" id="test1" lay-filter="test1" >
                <div carousel-item>
                    {foreach $topCarousel as $carousel}
                    <a href="{$carousel.url}" {if $carousel.url!="#"}target="_blank"{/if} title="{$carousel.title}">
                        <img src="{$carousel.img|default='public/activity/images/activity_default.jpg'}" style="width: 100%;height: 100%;">
                    </a>
                    {/foreach}
                </div>
            </div>
        </div>

        <div class="title_p mb50">
            <p class="cn">熱門推薦</p>
            <p class="en">recommendation</p>
         </div>
        <div class="more" style="height:40px" >
            <a href="/list.html" class="more-btn" style="float: right;color:#F97A28">更多 >></a>
        </div>
        <ul class="layui-row layui-col-space30 ul_height i_ul1">
            {volist name="recommend"  id = "item"}
            <li class="layui-col-md4 layui-col-xs6">
               <a href="activity/detail/{$item.id}.html" class="item dh_imgitem">
                  <div class="img_box" style="height: 2.4rem;">
                     <img src="{$item.logo}">
                  </div>
                  <div class="b1">
                     <p class="ft18 layui-elip mb14">{$item.name|default='-'}</p>
                     <p class="line-clamp2 ft14 gary_c6 mb30">{$item.abstract|default='-'}</p>
                     <p class="ft14 gary_c9">{$item.begin_time} ~ {$item.end_time}</p>
                  </div>
               </a>
            </li>
            {/volist}
         </ul>
    </div>
</section>
<script>
    layui.use(function () {
        layui.carousel.render({
            elem: '#test1'
            ,width: '100%' //设置容器宽度
            ,height:'100%'
            ,arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
        })
    })
</script>
<style>
    @media screen and (max-width: 768px) {
        #top-carousel-container {
            height: 200px;
        }
    }
    @media screen and (min-width: 768px) {
        #top-carousel-container {
            height: 400px;
        }
    }

    .more-btn:hover{
        color: #f5853e;
    }
</style>
{/block}